<template>
	<view>
		<image src="/static/dxy-image/fankui_1@2x.png" mode="" class="img"></image>
		<view class="name cflex">
			<image src="/static/dxy-image/xingming_1@2x.png" mode="" class="icon"></image>
			<view class="nameView">
				姓名
			</view>
			<input type="text" value="" class="inputname" @input="inputname" />
		</view>
		<view class="phone cflex">
			<image src="/static/dxy-image/xingming_1@2x.png" mode="" class="icon"></image>
			<view class="nameView">
				联系方式
			</view>
			<input type="text" value="" class="inputphone" @input="inputphone" />
		</view>
		<view class="content cflex">
			<image src="/static/dxy-image/yijian_1@2x.png" mode="" class="icon"></image>
			<textarea value="" placeholder="您好，欢迎您给我们产品提出使用感受和建议，我们将尽快处理您提出的宝贵建议，感谢您的支持！" @input="inputContext" />

			</view>
		
		<view class="imageBox cflex">
			<!-- <block v-for="(item,index) in images">
				<image :src="item" class="image_item"></image>				
			</block> -->
			<image :src="image" class="image_item" v-if="image!=''"></image>
			<view class="imageChoose" @tap="chooseImage" v-if="image==''">
				+
			</view>
		</view>
		
		<view class="button" @tap="submit">
			提交
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	const COS = require('../../libs/cos-wx-sdk-v5')
	const config = require('../../libs/config')
	const cos = new COS({
		getAuthorization: function(params, callback) { //获取签名 必填参数
			// 方法二（适用于前端调试）
			let authorization = COS.getAuthorization({
				SecretId: config.SecretId,
				SecretKey: config.SecretKey,
				Method: params.Method,
				Key: params.Key
			});
			callback(authorization);
		}
	});
	export default {
		data() {
			return {
				name:"",
				phone:"",
				content:"",
				images:[],
				image:''
			}
		},
		methods: {
			inputname(e){
				let that=this
				let text=e.detail.value
				that.name=text
				console.log(that.name)
			},
			inputphone(e){
				let that=this
				let text=e.detail.value
				that.phone=text
				console.log(that.phone)
			},
			inputContext(e){
				let that=this
				let text=e.detail.value
				that.content=text
				console.log(that.content)
			},
			chooseImage(e) {
				let that = this;
				
				uni.chooseImage({
						count: 9,
						sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: function(res) {
							uni.showToast({
								title: '正在上传',
								icon: 'loading',
								duration: 10000
							});
							let imageList = res.tempFilePaths
							for (let i = 0; i < imageList.length; i++) {
								let filePath = imageList[i]
								let Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名
								cos.postObject({
									Bucket: config.Bucket,
									Region: config.Region,
									Key: Key,
									FilePath: filePath,
									onProgress: function(info) {
										// console.log(JSON.stringify(info));
									}
								}, function(err, data) {
									let Paths = 'https://' + config.Bucket + '.cos.' + config.Region + '.myqcloud.com/' + Key
									// console.log('Paths', Paths)
									uni.showToast({
										title: '上传成功',
										icon: 'success',
										duration: 1000
									});
									//that.images.push(Paths)
									that.image=Paths
									// console.log('that.images', that.images)
								});
			
							}
						}
					})
				 
			
			},
			submit(){
				let that=this
				let name=that.name
				let phone=that.phone
				let content=that.content
				let images=that.image
				let token=uni.getStorageSync('token')
				ajax({
					url: 'suggest/addSuggest',
					data: {
						name: name,
						phone: phone,
						content: content,
						images: images,
						token: token,
					},
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					method: 'POST',
					success: function(res) {
						
					},
					error: function() {
						uni.showToast({
							title: res.data.msg,
							duration: 1500,
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {}

	.img {
		width: 352rpx;
		height: 312rpx;
		margin: 42rpx 0 0 200rpx;
	}

	.icon {
		width: 32rpx;
		height: 32rpx;
		margin: 27rpx 0 0 9rpx;

	}

	.name,
	.phone {
		width: 710rpx;
		height: 88rpx;
		box-shadow: 0 0rpx 10rpx 5rpx #f5f5f5;
		margin: 55rpx auto;
	}

	.nameView {
		font-size: 28rpx;
		line-height: 88rpx;
		margin-left: 30rpx;
	}

	.inputname,
	.inputphone {
		margin-top: 16rpx;
		margin-left: 40rpx;
	}

	.content {
		width: 710rpx;
		height: 300rpx;
		margin: 55rpx auto;
		box-shadow: 0 0rpx 10rpx 5rpx #f5f5f5;
	}
	textarea{
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;		
	}
	.imageBox{
		flex-wrap: wrap;
	}
	.image_item{
		width: 200rpx;
		height: 192rpx;
		margin-left: 30rpx;
			margin-top: 20rpx;
	}
	.imageChoose{
		width: 200rpx;
		height: 192rpx;
		background-color: #E5E5E5;
		text-align: center;
		line-height: 192rpx;
		font-size: 122rpx;
		color: #999999;	
		margin-left: 30rpx;
			margin-top: 20rpx;
	}
	.button{
		background-color: #FF7427;
		width: 430rpx;
		height: 76rpx;
		text-align: center;
		line-height: 76rpx;
		color: #FFFFFF;
		margin: 100rpx auto;
		border-radius: 100rpx;
		margin-top: 240rpx;		
	}
</style>
